<template>
    <div>
        <span>{{ counterStore.sum }}</span><br>
        <select  v-model.number='n'>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <button @click="add">加</button>
        <button @click="reduce">减</button>
    </div>
</template>


<script lang="ts">
export default {
    name:'Counter'
}

</script>

<script setup lang="ts">
    import {ref} from 'vue'
    import {useCounterStore} from '@/store/modules/counter'
    import {storeToRefs} from 'pinia'
    import { ElConfigProvider } from 'element-plus'

    const counterStore = useCounterStore()

    let n = ref(1)

    function add(){
        // 第一种修改数据方法
        //counterStore.sum += n.value

        // 第二种修改数据方式
        counterStore.add(n.value)

        // 第三种修改数据方法
        counterStore.$patch({
            sum:777
        })
    }

    // 批量获取
    const {sum} = storeToRefs(counterStore)
    
    // 监听counterStore数据变化
    counterStore.$subscribe((mutate,state) =>{
        console.log('数据发生变化',mutate,state)
    })

    function reduce(){
        counterStore.sum -= n.value
    }


</script>
